<template>
    <div class="main">
      <el-tabs type="border-card">
          <el-tab-pane v-if="flag==1" label="新增单元">
              
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :inline="true"    label-width="150px" class="demo-ruleForm">
                      <el-form-item label="计费项目名称" prop="payname"  >
                          <el-input v-model="ruleForm.payname" minlength="500" ></el-input>
                      </el-form-item>
                      <el-form-item label="计费优先级" prop="paylevel">
                          <el-input v-model="ruleForm.paylevel"></el-input>
                      </el-form-item>
                      <el-form-item label="项目用量/时长" prop="paynum">
                          <el-input v-model="ruleForm.paynum"></el-input>
                      </el-form-item>
                      <el-form-item label="项目价格" prop="paymoney">
                          <el-input v-model="ruleForm.paymoney"></el-input>
                      </el-form-item>
                      <el-form-item label="通知状态" prop="paystatus">
                          <el-select v-model="ruleForm.paystatus" placeholder="请选择状态" style="width: 500px;">
                          <el-option label="已通知" :value="1"></el-option>
                          <el-option label="未通知" :value="2"></el-option>
                          </el-select>
                      </el-form-item>
                      <el-form-item label="计费目录" prop="c_id">
                          <el-select v-model="ruleForm.c_id" placeholder="请选择状态" style="width: 500px;">
                          <el-option label="电费目录" :value="7"></el-option>
                          <el-option label="水费固定月目录" :value="8"></el-option>
                          <el-option label="水费按量目录" :value="9"></el-option>
                          <el-option label="天然气目录" :value="10"></el-option>
                          <el-option label="物业费目录" :value="11"></el-option>
                          <el-option label="宽带费目录" :value="12"></el-option>
                          </el-select>
                      </el-form-item>
                      </el-form>
                      <el-form :model="ruleForm"   label-width="150px" class="demo-ruleForm2">
                          <el-form-item class="formitem" label="通知内容" >
                              <vue-ueditor-wrap v-model="ruleForm.paycontent" :config="editorConfig" editor-id="editor-demo-01"  ></vue-ueditor-wrap>
                          </el-form-item>
                      </el-form>
  
  
                              <div class="button-box" style="z-index: 10;height: 150px;position: fixed;top: 160px;right: 15px;">
                                    <el-button type="primary" size="medium" class="button1" @click="tobefore" >
                                        <span class="span1" >
                                            <svg t="1722249586420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2302"  height="20"><path d="M947.4 864C893.2 697.7 736.2 578.9 551 575.5c-23.1-0.4-44.9 0.1-65.6 1.5v164.3c0.1 0.5 0.2 1 0.2 1.5 0 4-3.3 7.3-7.3 7.3-2.7 0-5-1.4-6.2-3.5v0.7L68.8 465.4h2.1c-4 0-7.3-3.3-7.3-7.3 0-2.9 1.7-5.4 4.1-6.6L472 169v0.7c1.3-2.1 3.6-3.5 6.2-3.5 4 0 7.3 3.3 7.3 7.3 0 0.5-0.1 1-0.2 1.5v159.4c18.5-0.9 37.9-1.2 58.3-0.8 230.1 3.9 416.7 196.9 416.7 427.1 0.1 35.5-4.5 70.2-12.9 103.3z m-462-704.4v0.2h-0.4l0.4-0.2z m0 596.9l-0.3-0.2h0.3v0.2z" fill="#ffffff" p-id="2303"></path></svg>
                                            <span>返回</span>
                                        </span>
                                    </el-button>
                                    <el-button type="primary" size="medium" class="" @click="submitForm('ruleForm')">
                                        <span class="span1">
                                            <svg t="1722251178632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3414"  height="20"><path d="M925.248 356.928l-258.176-258.176a64 64 0 0 0-45.248-18.752H144a64 64 0 0 0-64 64v736a64 64 0 0 0 64 64h736a64 64 0 0 0 64-64V402.176a64 64 0 0 0-18.752-45.248zM288 144h192V256H288V144z m448 736H288V736h448v144z m144 0H800V704a32 32 0 0 0-32-32H256a32 32 0 0 0-32 32v176H144v-736H224V288a32 32 0 0 0 32 32h256a32 32 0 0 0 32-32V144h77.824l258.176 258.176V880z" p-id="3415" fill="#ffffff"></path></svg>
                                            <span>保存</span>
                                        </span>
                                    </el-button>
                                    <el-button type="primary" size="medium" class="" @click="submitForm('ruleForm')">
                                        <span class="span1">
                                            <svg t="1722499309423" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2587"  height="20"><path d="M900.4 117.6c-8.3-5.5-19.1-5.5-27.5 0L123.5 617.2c-7.7 5.1-12 14.1-11 23.3 0.9 9.2 6.9 17.2 15.5 20.6l195.3 78.2 91.9 160.9c4.5 7.9 12.9 12.8 22 12.7 8.8 0 17-4.7 21.5-12.2l52-86.4 242.1 96.9c2.9 1.2 6.1 1.8 9.2 1.7 12.4 0.2 23-8.8 25-21l124.9-749.4c1.5-9.8-3-19.6-11.5-24.9zM437.3 836.5l-70.2-121.7L840 208 437.3 836.5z" fill="#ffffff" p-id="2588"></path></svg>
                                            <span>提交</span>
                                        </span>
                                    </el-button>
                              </div>
  
              
          </el-tab-pane>
          <el-tab-pane v-if="flag==2" label="单元详细">
              <div class="detail">
                  <div class="list">
                      <div class="list-title"><div style="color: red;margin-right: 5px;">*</div>计费项目名称：</div><div class="list-content">{{ ruleForm2.payname }}</div>
                  </div>
                  <div class="list">
                      <div class="list-title"><div style="color: red;margin-right: 5px;">*</div>x项目优先级名称：</div><div class="list-content">{{ ruleForm2.paylevel }}</div>
                  </div>
                  <div class="list">
                     <div class="list-title"><div style="color: red;margin-right: 5px;">*</div>项目用量/时长：</div><div class="list-content">{{ ruleForm2.paynum }}</div>
                  </div>
                  <div class="list">
                      <div class="list-title"><div style="color: red;margin-right: 5px;">*</div>项目价格：</div><div class="list-content">{{ ruleForm2.paymoney }}</div>
                  </div>
                  <div class="list">
                      <div class="list-title"><div style="color: red;margin-right: 5px;">*</div>通知状态：</div><div class="list-content">{{ ruleForm2.paystatus ==1 ?"已通知":"未通知" }}</div>
                  </div>
                  <div class="list">
                      <div class="list-title"><div style="color: red;margin-right: 5px;">*</div>通知人：</div><div class="list-content">{{ ruleForm2.username }}</div>
                  </div>
                  <div class="list">
                      <div class="list-title">通知内容：</div><div class="list-content" v-html="ruleForm2.paycontent"></div>
                  </div>
              </div>
              <div class="button-box" style="z-index: 10;height: 150px;position: fixed;top: 160px;right: 15px;">
                                  <el-button type="primary" size="medium" class="button1" @click="tobefore" >
                                  <span class="span1" >
                                      <svg t="1722249586420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2302"  height="20"><path d="M947.4 864C893.2 697.7 736.2 578.9 551 575.5c-23.1-0.4-44.9 0.1-65.6 1.5v164.3c0.1 0.5 0.2 1 0.2 1.5 0 4-3.3 7.3-7.3 7.3-2.7 0-5-1.4-6.2-3.5v0.7L68.8 465.4h2.1c-4 0-7.3-3.3-7.3-7.3 0-2.9 1.7-5.4 4.1-6.6L472 169v0.7c1.3-2.1 3.6-3.5 6.2-3.5 4 0 7.3 3.3 7.3 7.3 0 0.5-0.1 1-0.2 1.5v159.4c18.5-0.9 37.9-1.2 58.3-0.8 230.1 3.9 416.7 196.9 416.7 427.1 0.1 35.5-4.5 70.2-12.9 103.3z m-462-704.4v0.2h-0.4l0.4-0.2z m0 596.9l-0.3-0.2h0.3v0.2z" fill="#ffffff" p-id="2303"></path></svg>
                                      <span>返回</span>
                                  </span>
                              </el-button>
                              </div>
  
          </el-tab-pane>
      </el-tabs>
  
      
      
    </div>
  </template>
  
  <script>
  import VueUeditorWrap from 'vue-ueditor-wrap';
  export default {
      components: {
    VueUeditorWrap
  },
      data(){
          return{
              msg: '',
              editorConfig: {
              // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
              UEDITOR_HOME_URL: "/UEditor/",
              // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
              serverUrl: "//ueditor.zhenghaochuan.com/cos",
              initialFrameHeight: 300,
              },
              flag:this.$route.query.flag,
              content: '',
              ruleForm: {
                  payname:"",
                  paylevel:"",
                  paynum:"",
                  paymoney:"",
                  paystatus:"",
                  c_id:"",
                  paycontent:"",
                  coststatus:this.$route.query.coststatus,
                  token:sessionStorage.getItem("token"),
                },
              ruleForm2: {
                  payname:"",
                  paylevel:"",
                  paynum:"",
                  paymoney:"",
                  paystatus:"",
                  c_id:"",
                  paycontent:"",
                  username:"",
                  coststatus:this.$route.query.coststatus,
                  token:sessionStorage.getItem("token"),
                },
                  rules: {
                  payname: [
                      { required: true, message: '请输入计费项目名称', trigger: 'blur' },
                  ],
                  paylevel: [
                      { required: true, message: '请输入计费项目优先级', trigger: 'blur' }
                  ],
                  paynum: [
                      {  required: true, message: '请输入项目用量/时长', trigger: 'blur' }
                  ],
                  paymoney: [
                      {  required: true, message: '请输入项目价格', trigger: 'change' }
                  ],
                  paystatus: [
                      {  required: true, message: '请选择通知状态', trigger: 'change' }
                  ],
                  c_id: [
                      {  required: true, message: '请选择计费目录', trigger: 'change' }
                  ],
  
                  
              },
              storepage:{
                  u_id: this.$route.query.id,
                  communityname: "",
                  unitname: "",
                  unitnum: "",
                  unitstatus: "",
                  unitcontext: "",
                  token: "",
              },
              detailpage:{
                  id: this.$route.query.id,
                  token: sessionStorage.getItem("token"),
              }
          }
      },
      created(){
          this.gettoken()
          this.detailmessage()
      },
      methods:{
          //得到token
          gettoken(){
              this.storepage.token = sessionStorage.getItem("token")
              this.detailpage.token = sessionStorage.getItem("token")
          },
          //录入接口
          storemessage(){
                  this.$axios.post("http://community.byesame.com/cost/addCostData",this.ruleForm).then((res)=>{
                  console.log(res.data)
                  this.$message({
                      type: 'success',
                      message: '提交成功!'
                  });
                  this.$router.push("/pay/payType")
              })
              
          },
          //返回
          tobefore(){
              this.$router.push("/pay/payType")
          },
          //录入
          submitForm(formName) {
              this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.$confirm('确定提交信息?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  }).then(() => {
                  
                  this.storemessage()
                  }).catch(() => {
                  this.$message({
                      type: 'info',
                      message: '已取消提交'
                  });          
                  });
              } else {
                  console.log('error submit!!');
                  return false;
              }
              });
          },
          //详细页得到数据
          detailmessage(){
              if(this.$route.query.flag==2){
                  this.$axios.get("http://community.byesame.com/cost/getCostDetail",{params:this.detailpage}).then((res)=>{
                    this.ruleForm2 = res.data[0]
                  console.log("第二页")
              })
              }
              
          },
          //前往编辑
          towrite(){
              this.flag = 1
              this.storepage.unitcontext = this.ruleForm.unitcontext
          },
      }
  
  }
  </script>
  
  <style scoped lang="scss">
  .main{
      position: relative;
  }
  
  .span1{
      display: flex;
      align-items: center
  }
  .button-box{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      height: 100px;
      justify-content: space-between;
      position: absolute;
      right: 0px;
      top: 80px;
  }
  .el-button+.el-button{
      margin: 0;
  }
  .el-form--inline .el-form-item {
      width: 50%;
      box-sizing: border-box;
      margin: 0;
      margin-bottom: 20px;
  }
  .demo-ruleForm{
      display: flex;
      flex-wrap: wrap;
  }
  .el-input{
      width: 500px;
  }
  .el-form-item{
      width: 500px;
  }
  
  
  .editor{
      height: 500px;
      width: 100%;
  }
  .el-form-item{
      width: 92%;
  }
  .list{
      display: flex;
      line-height: 50px;
      width: 100%;
  }
  .list-title{
      flex: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
  }
  .list-content{
      flex: 8;
  }
  </style>